<template>
  <view class="m-t40">
    <view class="flex">
      <view class="line" />
      <text class="text-700-130">最新动态</text>
    </view>

    <view class="section">
      <view v-for="item in list" :key="item.id" class="card flex"
        :data-url="'/pages/dynamic-details/dynamic-details?id=' + item.id" @click="goto">
        <image class="cover" :src="item.cover" mode="aspectFill" />

        <view class="flex-1 flex-d-sb  m-l20">
          <text class="text-700-130">{{ item.title }}</text>
          <text class="text-400-128 m-t10">{{ item.intro }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useNavigator } from '@/hooks/use-navigator'
import { useRequest } from '@/hooks/use-request'

type DongtaiRecord = {
  id: number;
  title: string;
  intro: string;
}

const { goto } = useNavigator()

const { data: list } = useRequest<DongtaiRecord[]>(() => uni.$u.get('/dongtai/lst'), [])
</script>

<style lang="scss" scoped>
.line {
  width: 8rpx;
  height: 26rpx;
  margin-right: 20rpx;
  background-color: $bg-color-2;
}

.section {
  margin-top: 30rpx;
  padding: 0 20rpx;
  border-radius: 20rpx;
  background-color: $bg-color-1;

  .card {
    height: 190rpx;
    border-bottom: 1rpx solid $border-color-4;

    &:last-child {
      border: none;
    }

    .cover {
      width: 148rpx;
      height: 148rpx;
      border-radius: 10rpx;
      border: 1rpx solid $border-color-4;
    }
  }
}
</style>
